<template>
  <el-input
    v-model="editValue"
    :disabled="disabled"
    :placeholder="placeholder"
    :maxlength="length"
    :show-word-limit="isShowWordLimit && !!length"
    @blur="editValue = filtersPrecision(editValue, precision, length, min, max); $emit('input', editValue)"
  />
</template>

<script>
export default {
  name: 'AppNumberInput',
  props: {
    // 数值
    value: {
      type: [Number, String],
      default: null
    },

    // 精度
    precision: {
      type: Number,
      default: 2
    },

    // 长度
    length: {
      type: Number,
      default: 8
    },

    // 最小值
    min: {
      type: Number,
      default: undefined
    },

    // 最大值
    max: {
      type: Number,
      default: undefined
    },

    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },

    // 是否显示输入的位数
    isShowWordLimit: {
      type: Boolean,
      default: true
    },

    // 占位
    placeholder: {
      type: String,
      default: '请输入'
    },
  },
  data() {
    return {
      editValue: ''
    }
  },
  watch: {
    value() {
      this.editValue = this.filtersPrecision(this.value, this.precision, this.length, this.min, this.max)
    },
    editValue() {
      this.editValue = this.editValue?.replace(/[^\d.]/g, '')
    }
  },
  mounted() {
    this.editValue = this.filtersPrecision(this.value, this.precision, this.length, this.min, this.max)
  },
  methods: {
    network() {
      return {
        example: async() => {
          console.log('network')
        }
      }
    },
    handler() {
      return {
        example: () => {
          console.log('handle')
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .container {

  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"]{
    -moz-appearance: textfield;
  }
</style>
